jQuery charts and Graphs - gvCharts Plugin

Create interactive charts or graph in 3 easy steps in jQuery by using data from HTML table. gvChart is a jQuert plugin which uses Google Chart API to create interactive charts. gvChat provide options to create Area Chart, Line Chart, Bar Chart, Column Chart and Pie Chart.

Include jQuery Files

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gvChart.js"></script>

Create your table

<table id="myTable">
<caption>Visitors Flow</caption>
<thead><tr><th></th>
<th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th>
<th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th>
</tr></thead>
<tbody>
<tr><th>2012</th><td>120</td><td>160</td><td>280</td><td>340</td><td>260</td>
<td>680</td><td>750</td><td>950</td><td>800</td><td>600</td><td>450</td>
<td>240</td></tr><tr>
<th>2011</th><td>500</td><td>600</td><td>700</td><td>750</td><td>800</td>
<td>800</td><td>750</td><td>600</td><td>450</td><td>350</td><td>250</td>
<td>100</td></tr></tbody></table>

The table id will used to covert the table to chart or graph. Caption will display as the graph title. In the following code chatType is used to create the type of chart. It can be either AreaChart, LineChart, BarChart, ColumnChart or PieChart as per your requirement. There is only change in case of Pie Chart that PieChart uses only first row as a data set from the table and ignore other rows.

Create a Line Chart

jQuery('#myTable').gvChart({
chartType: 'LineChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
}
});

Output:

Create a Area Chart

jQuery('#myTable').gvChart({
chartType: 'AreaChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
}
});

Output:

Create a Bar Chart

jQuery('#myTable').gvChart({
chartType: 'BarChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
}
});

Output:

Create a Column Chart

jQuery('#myTable').gvChart({
chartType: 'ColumnChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
}
});

Output:

Create a Column Chart

jQuery('#myTable').gvChart({
chartType: 'PieChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
}
});

Output:

Chart - Graph Setting

If you want to change the colors of the chart then you can use colors option and you can change the Title by using title option.

jQuery('#myTable').gvChart({
chartType: 'LineChart',
gvSettings: {
vAxis: {title: 'No of Visitors'},
hAxis: {title: 'Month'},
width: 720,
height: 300,
colors: ['#FF0000', '#00FF00'],
title: 'Line Chart on Visitors Flow'
}
});